<template>
    <div class="container">
        <div class="option">
            <el-button type="primary" round @click="nativePick">点击取色</el-button>
            <el-button circle :style="{ background: color }" />
            <el-input v-model="color" style="width: 80px" placeholder="HEX Color" />
            <el-input v-model="rgbColor" style="width: 130px" placeholder="RGB Color" />
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
const color = ref('')
const rgbColor = ref('')
const nativePick = async (e) => {
    window.electron.ipcRenderer.send('getColor',);
    const val = e ? e.target.value : null
    if (val) {
        color.value = val
    } else {
        const eyeDropper = new window.EyeDropper() // 初始化一个EyeDropper对象
        console.log('按Esc可退出')
        try {
            const result = await eyeDropper.open() // 开始拾取颜色
            color.value = result.sRGBHex
            rgbColor.value = `rgb(${result.sRGBHex.replace('#', '').match(/.{2}/g).map((v) => parseInt(v, 16))})`
            // 复制到剪贴板
            navigator.clipboard.writeText(result.sRGBHex)
        } catch (e) {
            console.log('用户取消了取色')
        }
    }
    window.electron.ipcRenderer.send('completeGetColor')
}

</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    height: 100vh;
    padding: 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    // border: 1px solid #333;
    background: #a7a7a765;
    color: #333;
    opacity: 0.9;
    .option{
        -webkit-app-region: no-drag;
        width: 100%;
        display: flex;
        align-items: center;
        .el-input{
            margin-left: 10px;
        }
    }
}
</style>
